<template>
  <div class="cart">
    <!-- 1.页面头部 -->
    <my-header></my-header>

    <!--2.页面主体 -->
    <div class="w page-warp" v-loading="pageData.loading">
      <!-- 2.1表头 -->
      <div class="cart-header">
        <table class="cart-table">
          <tbody>
            <th class="cart-cell cell-check">

              <label for="" class="cart-label">
                <el-checkbox class="cart-select-all" v-model="resData.cartData.allChecked" @change="clickSelectAll">全选</el-checkbox>
              </label>
            </th>
            <th class="cart-cell cell-info">商品信息</th>
            <th class="cart-cell cell-price">单价(￥)</th>
            <th class="cart-cell cell-count">数量</th>
            <th class="cart-cell cell-total">合计(￥)</th>
            <th class="cart-cell cell-opera">操作</th>
          </tbody>
        </table>
      </div>

      <!-- 2.2：表格内容 -->
      <div class="cart-list" >
        <table class="cart-table" v-if="resData.cartData.cartProductVoList" v-for="(product,index) in resData.cartData.cartProductVoList" :key="index">
          <tbody>
            <tr>
              <td class="cart-cell cell-check">
                <label class="cart-label" for="">
                  <el-checkbox class="cart-select-all" v-model="product.productChecked" @change="clickSelectSingle(product.productId,product.productChecked)"></el-checkbox>
                </label>
              </td>
              <td class="cart-cell cell-img" @click="clickIamge(product.productId)">
                <img v-lazy="resData.cartData.imageHost+product.productMainImage" :key="index" :alt="product.productName" class="p-img">
              </td>
              <td class="cart-cell cell-info">
                <a href="javascript:void(0)" @click="clickIamge(product.productId)" class="link">{{product.productName}}</a>
              </td>
              <td class="cart-cell cell-price">{{product.productPrice}}</td>
              <td class="cart-cell cell-count">
                <el-input-number size="mini" v-model="product.quantity" :min="1" :max="product.productStock" @change="clickProductCount(product.productId,product.quantity)"></el-input-number>
              </td>
              <td class="cart-cell cell-total">{{product.productTotalPrice}}</td>
              <td class="cart-cell cell-opera">
                <span class="link cart-delete">
                  删除
                  <i class="fa fa-trash" style="font-size:20px" @click="deletePro(product.productId)"></i>
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <!-- 2.3：购物为空时的提示信息 -->
      <div v-if="pageData.isEmptyCart" class="err-tips" 
      style="border: 1px solid #ebebeb;height:300px;line-height:300px;margin-top:10px">
        购物车！空~
        <span>
          <router-link to="/product-list">现在去购物</router-link>
        </span>
      </div>

      <!-- 2.4：表格尾部 -->
      <div class="cart-footer">
        <div class="select-con">
          <label for="" class="select-con">
            <el-checkbox class="cart-select-all" v-model="resData.cartData.allChecked" @change="clickSelectAll">全选</el-checkbox>
          </label>
        </div>
        <div class="delete-con">
          <span class="link delete-selected">
            <i class="fa fa-trash-o" @click="deleteAll"> 全部删除</i>
          </span>
        </div>
        <div class="submit-con">
          <span>总价(￥)：</span>
          <span class="submit-total">
            {{resData.cartData.catTotalPrice}}
          </span>
          <span class="btn btn-submit">
            买单
          </span>
        </div>
      </div>
    </div>
    
    <!-- 3.页面尾部-->
    <my-footer></my-footer>

  </div>
</template>

<script>
import MyHeader from "@/components/Header";
import MyFooter from "@/components/Footer";
import Cart from "@/service/cart-service";
import Tips from "@/utils/tipsUtil";
const _tips = new Tips();
const _cart = new Cart();
export default {
  data() {
    return {
      //页面用到的数据
      pageData: {
        loading: true, //加载
        isEmptyCart: false //空数据提示标志
      },

      //请求缓存的数据
      resData: {
        cartData: ""
      }
    };
  },
  components: {
    MyHeader,
    MyFooter
  },
  mounted() {
    this.init();
  },
  methods: {
    /**
     * 1.初始化，获取当前用户的购物车列表信息
     */
    init() {
      const vue = this;
      _cart.getCartList().then(
        res => {
          vue.handleSucRes(vue, res);
        },
        err => {
          vue.handleFailRes(vue, err);
        }
      );
    },

    /**
     *2.点击全选复选框的响应事件【进行全选，全反选】
     */
    clickSelectAll() {
      const vue = this;
      //如果目前是全选，则进行全反选请求
      if (!vue.resData.cartData.allChecked) {
        _cart.unselectAll().then(
          res => {
            vue.handleSucRes(vue, res);
          },
          err => {
            vue.handleFailRes(vue, err);
          }
        );
      } else {
        _cart.selectAll().then(
          res => {
            vue.handleSucRes(vue, res);
          },
          err => {
            vue.handleFailRes(vue, err);
          }
        );
      }
    },

    /**
     *3.点击图片跳转到商品详情页面
     */
    clickIamge(id) {
      this.$router.push({ path: "/product", query: { id: id } });
    },

    /**
     *4.点击单选复选框【实现商品的单选或单反选】
     */
    clickSelectSingle(productId, isSelect) {
      const vue = this;
      //如果是勾选为true
      if (isSelect) {
        _cart.select(productId).then(
          res => {
            vue.handleSucRes(vue, res);
          },
          err => {
            vue.handleFailRes(vue, err);
          }
        );
      } else {
        _cart.unSelect(productId).then(
          res => {
            vue.handleSucRes(vue, res);
          },
          err => {
            vue.handleFailRes(vue, err);
          }
        );
      }
    },

    /**
     * 5.点击商品数量的组件【实现对购物车的商品的数量的数量进行加减】
     */
    clickProductCount(productId, count) {
      const vue = this;
      let flag = vue.isSelect(productId);
      if (flag) {
        const data = {
          count: count,
          productId: productId
        };
        _cart.update(data).then(
          res => {
            vue.handleSucRes(vue, res);
          },
          res => {
            vue.handleFailRes(vue, err);
          }
        );
      } else {
        _tips.notifyTips(vue, "请选择先勾选购物车中的商品");
      }
    },

    /**
     *6.删除单个商品
     */
    deletePro(delteProductId) {
      const vue = this;
      let flag = vue.isSelect(delteProductId);
      if (flag) {
        //弹出框
        const tipsData = {
          msg: "确定删除此商品吗？"
        };
        _tips.confirmTips(
          vue,
          tipsData,
          () => {
            //缓存把选中的商品id
            const arrProductIds = [];
            arrProductIds.push(delteProductId);

            //发送删除商品的请求
            vue.deleteProResquest(arrProductIds);
          },
          () => {}
        );
      } else {
        _tips.notifyTips(vue, "请选择先需要从购物车中移除的商品");
      }
    },

    /**
     * 7.删除购物车中的全部商品
     */
    deleteAll() {
      const vue = this;
      //先判断是够已经全选了
      if (vue.resData.cartData.allChecked) {
        //确定删除的弹出框
        const tipsData = {
          msg: "三思~确定删除购物车中的全部商品吗？"
        };
        _tips.confirmTips(
          vue,
          tipsData,
          //按下确定的回调函数
          () => {
            let arrProductIds = [];
            //遍历取出所有的商品id
            const cartProductVoList = vue.resData.cartData.cartProductVoList;
            cartProductVoList.map(function(product, index) {
              arrProductIds.push(product.productId);
            });
            //发送删除商品的请求
            vue.deleteProResquest(arrProductIds);
          },
          //按下取消的回调函数
          () => {}
        );
      } else {
        _tips.notifyTips(vue, "请选择先勾选全部商品");
      }
    },

    /**
     * 私有公共方法*****************************************************************
     */
    /**
     * 处理成功的响应请求
     */
    handleSucRes(vue, res) {
      //关闭加载loading组件
      vue.pageData.loading = false;
      vue.resData.cartData = res.data;
      if (vue.resData.cartData.cartProductVoList.length == 0) {
        vue.pageData.isEmptyCart = true;
      }
    },

    /**处理失败的响应请求
     *
     */
    handleFailRes(vue, res) {
      //关闭加载loading组件
      vue.pageData.loading = false;
      _tips.notifyTips(vue, err.msg);
    },

    /**
     *判断目标商品在商品列表中是否选中
     */
    isSelect(productId) {
      const vue = this;
      const cartProductVoList = vue.resData.cartData.cartProductVoList;
      let isSelect;
      cartProductVoList.map(function(product, index) {
        //找到列表中的商品
        if (product.productId == productId) {
          //返回商品的选中状态【true：选中；false：没选中】
          isSelect = product.productChecked;
        }
      });
      return isSelect;
    },

    /**
     * 删除商品的请求（在删除当个商品和删除所有商品处被调用）
     */
    deleteProResquest(arrProductIds) {
      const vue = this;
      //请求参数的构建
      const resquestData = {
        productIds: ""
      };
      //将数组中的元素为','分割再拼接为字符串
      resquestData.productIds = arrProductIds.join(",");

      //发送请求
      _cart.deletePros(resquestData).then(
        res => {
          vue.handleSucRes(vue, res);
        },
        err => {
          vue.handleFailRes(vue, err);
        }
      );
    }
  }
};
</script>

<style scoped lang="scss">
.cart-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ebebeb;
  margin-top: 10px;
  th {
    font-weight: normal;
    font-size: 14px;
    color: #409eff;
  }
  .cell-info {
    width: 35%;
    text-align: left;
  }
  .cell-price {
    width: 10%;
    text-align: center;
  }
  .cell-count {
    width: 15%;
    text-align: center;
  }
  .cell-total {
    width: 14%;
    text-align: center;
    font-weight: bold;
  }
  .cell-opera {
    width: 10%;
    text-align: center;
  }
}
.cart-header {
  background: #eee;
  .cart-cell {
    height: 40px;
    line-height: 40px;
  }
  .cell-info {
    width: 45%;
    padding-left: 106px;
  }
  .cell-check {
    padding-left: 20px;
  }
}

.cart-list {
  .cell-check {
    width: 6%;
    text-align: left;
    padding-left: 17px;
  }
  .cell-img {
    width: 10%;
    text-align: left;
    :hover {
      cursor: pointer;
      opacity: 0.7;
    }
    .p-img {
      margin: 10px 0;
      width: 80px;
      height: 80px;
      border: 1px solid #ddd;
    }
  }
  .cell-opera {
    .cart-delete:hover {
        cursor: pointer;
        color:  #c60023;
    }
  }
}

.cart-footer {
  vertical-align: center;
  margin-top: 10px;
  position: relative;
  line-height: 64px;
  background: #eee;
  overflow: hidden;
  .select-con {
    float: left;
    padding-left: 10px;
  }
  .delete-con {
    vertical-align: center;
    float: left;
    margin-left: 20px;
    .delete-selected {
      font-size: 11px;
      font-weight: bolder;
      :hover {
        cursor: pointer;
        color: #c60023;
        font-size: 14px;
      }
    }
  }
  .submit-con {
    float: right;
    .submit-total {
      padding-right: 5px;
      font-size: 20px;
      color: #c60023;
      font-weight: bold;
      vertical-align: center;
    }
    .btn-submit {
      width: 80px;
      text-align: center;
      height: 100%;
      line-height: 55px;
    }
  }
}
</style>
